<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">恋爱餐厅</text>
      <text class="subtitle">开启甜蜜美食之旅</text>
    </view>
    
    <view class="login-content">
      <view class="welcome-section">
        <text class="welcome-title">欢迎登录</text>
        <text class="welcome-desc">使用微信手机号快速登录</text>
      </view>
      
      <view class="login-button-section">
        <button 
          class="login-btn" 
          @tap="getPhoneNumber"
          :loading="loading"
        >
          <text class="btn-text">{{ loading ? '登录中...' : '微信手机号一键登录' }}</text>
        </button>
        
        <text class="privacy-tips">
          登录即表示同意<text class="privacy-link">《用户协议》</text>和<text class="privacy-link">《隐私政策》</text>
        </text>
      </view>
    </view>
    
    <view class="decoration">
      <view class="heart heart-1">❤️</view>
      <view class="heart heart-2">💕</view>
      <view class="heart heart-3">💖</view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/modules/user'
import storage from '@/utils/storage'

export default {
  data() {
    return {
      loading: false
    }
  },
  
  methods: {
    async getPhoneNumber(e) {
      if (this.loading) return
      
      this.loading = true
      
      try {
        // #ifdef MP-WEIXIN
        // 微信小程序获取手机号
        await this.wxLogin()
        // #endif
        
        // #ifndef MP-WEIXIN
        // 非微信小程序环境，使用模拟数据
        await this.mockLogin()
        // #endif
        
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 微信小程序登录流程
    async wxLogin() {
      const loginRes = await new Promise((resolve, reject) => {
        uni.login({
          success: resolve,
          fail: reject
        })
      })
      
      if (!loginRes.code) {
        throw new Error('微信登录失败')
      }
      
      // 使用模拟API获取手机号
      const { loginByPhone } = await import('@/api/auth.js')
      const mockPhone = '138****' + (Math.floor(Math.random() * 9000) + 1000)
      
      const loginResult = await loginByPhone(mockPhone, loginRes.code)
      if (loginResult.success) {
        await this.handleLoginSuccess(loginResult.data)
      } else {
        throw new Error(loginResult.message || '登录失败')
      }
    },
    
    // 模拟登录（非微信环境）
    async mockLogin() {
      const { loginByPhone } = await import('@/api/auth.js')
      const mockPhones = ['138****1234', '139****5678', '150****9012', '186****3456']
      const randomPhone = mockPhones[Math.floor(Math.random() * mockPhones.length)]
      
      const loginResult = await loginByPhone(randomPhone)
      if (loginResult.success) {
        await this.handleLoginSuccess(loginResult.data)
      } else {
        throw new Error(loginResult.message || '登录失败')
      }
    },
    
    // 处理登录成功
    async handleLoginSuccess(userData) {
      const userStore = useUserStore()
      
      // 保存用户信息到store
      userStore.setUserInfo(userData.user)
      userStore.setPartnerInfo(userData.partner)
      userStore.setToken(userData.token)
      userStore.setUserPoints(userData.userPoints)
      userStore.setPartnerPoints(userData.partnerPoints)
      userStore.setRelationshipDays(userData.relationshipDays)
      
      // 保存到本地存储
      storage.setToken(userData.token)
      storage.setUserInfo(userData.user)
      
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
      
      // 跳转到首页
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE5E5 0%, #FFF0F0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
  z-index: 10;
}

.logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #FF6B6B;
  margin-bottom: 10rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
  display: block;
}

.login-content {
  width: 100%;
  padding: 0 80rpx;
  z-index: 10;
}

.welcome-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.welcome-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.welcome-desc {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.login-button-section {
  text-align: center;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  border-radius: 44rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
  
  &:active {
    transform: scale(0.98);
  }
}

.btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}

.privacy-tips {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.privacy-link {
  color: #FF6B6B;
  text-decoration: underline;
}

.decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.heart {
  position: absolute;
  font-size: 40rpx;
  animation: float 6s ease-in-out infinite;
  opacity: 0.6;
}

.heart-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.heart-2 {
  top: 30%;
  right: 20%;
  animation-delay: 2s;
}

.heart-3 {
  bottom: 25%;
  left: 25%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20rpx) rotate(10deg);
    opacity: 0.8;
  }
}
</style>